<html>
  <head>
	<script language="JavaScript" src="calendar_us.js"></script>
	<link rel="stylesheet" href="calendar.css">


<script type="text/javascript">



var dataObject={ "networks":[{"id":"att", "exp":20100101}]};

function setData(name, value)
{
  dataObject.networks[0][name] = value;
}

function getData(name)
{
  return dataObject.networks[0][name];
}



function createJSONString()
{
  return "{ \"networks\" : { \"id\" : \"" + getData("id") + "\", \"expiration\" : \"" + getData("exp") + "\" } "; 
}

function onSelectionChanged(selectedObject)
{
  //var index = selectedObject.selectedIndex; 
  //var which = selectedObject.options[index].value;

  setData("id", selectedObject.options[selectedObject.selectedIndex].value);

}



var map = {"map":{"att":[72,72,84,4,85,5,86,5,87,5,89,5,90,6,91,6,92,6,93,7,94,7,95,8,97,8,98,8,99,9,100,9,101,10,102,10,103,11,104,11,105,12,106,13,107,13,108,14,109,14,110,15,111,16,112,17,113,17,114,18,115,19,116,19,117,20,118,21,119,22,120,23,120,24,121,24,122,25,123,26,124,27,125,28,125,29,126,30,127,31,127,32,128,33,129,34,130,35,130,36,131,37,131,38],"tmobile":[72,72,131,38,132,39,133,40,133,41,134,42,134,43,135,44,135,45,136,46,136,48,136,49,137,50,137,51,138,52,138,53,138,54,139,56,139,57,139,58,139,59,140,60,140,61,140,63,140,64,140,65,140,66,140,67,140,69,141,70,141,71,141,72,141,73,141,74,140,76,140,77,140,78,140,79,140,80,140,82,140,83,140,84,139,85,139,86,139,88,139,89,138,90,138,91,138,92,137,93,137,94,136,96,136,97,136,98,135,99,135,100,134,101,134,102,133,103,132,104,132,105,131,106,131,107,130,108,129,109,129,110,128,111,127,112,127,113,126,114,125,115,124,116,124,117,123,118,122,119,121,120,120,121,120,121,119,122,118,123,117,124,116,125,115,125,114,126,113,127,112,128,111,128,110,129,109,130,108,130,107,131,106,131,105,132,104,133,103,133,102,134,101,134,100,135,99,135,98,136,96,136,95,136,94,137,93,137,92,138,91,138,90,138,88,139,87,139,86,139,85,139,84,140,83,140,81,140,80,140,79,140,78,140,77,140,75,140,74,141,73,141,72,141,71,141,70,141,68,140,67,140,66,140],"sprint":[72,72,41,133,40,132,39,132,37,131,36,131,35,130,34,129,33,129,32,128,31,127,31,127,30,126,29,125,28,124,27,124,26,123,25,122,24,121,23,120,22,119,22,119,21,118,20,117,19,116,19,115,18,114,17,113,16,112,16,111,15,110,14,109,14,108,13,107,12,106,12,105,11,104,11,103,10,102,10,101,9,100,9,99,8,97,8,96,7,95,7,94,7,93,6,92,6,91,6,89,5,88,5,87,5,86,5,85,4,84,4,82,4,81,4,80,4,79,4,78,4,77,4,75,3,74,3,73,3,72,3,71,3,69,4,68,4,67,4,66,4,65,4,63,4,62,4,61,5,60,5,59,5,57,5,56,6,55,6,54,6,53,7,52,7,51,7,49,8,48,8,47,9,46,9,45,9,44,10,43,10,42,11,41,12,40,12,39,13,37,13,36,14,35,15,34,15,33,16,32,17,31,17,31,18,30,19,29,20,28,20,27,21,26,22,25,23,24,24,23,25,22,25,22,26,21,27,20,28,19,29,19,30,18,31,17,32,16,33,16,34,15,35,14,36,14,37,13,38,12,39,12,40,11],"cingular":[72,72,66,140,64,140,63,140,62,140,61,140,60,139,59,139,57,139,56,139,55,138,54,138,53,138,52,137,50,137,49,137,48,136,47,136,46,135,45,135,44,134,43,134,42,133],"unknown":[72,72,40,11,41,11,42,10,43,10,45,9,46,9,47,8,48,8,49,7,50,7,51,7,52,6,54,6,55,6,56,5,57,5,58,5,59,5,61,4,62,4,63,4,64,4,65,4,67,4,68,4,69,3,70,3,71,3,73,3,74,3,75,3,76,4,77,4,78,4,80,4,81,4,82,4,83,4]}};




function onAreaSelection(selectedArea)
{
  alert("clicked "+selectedArea.id+ " " + createJSONString());
}

function areas( coordinates )
{
  var areas = "";
 
  for (id in coordinates)
  {
    areas += "<area shape=\"poly\" coords=\"" + coordinates[id].join(", ") + "\" href=\"\" id=\"" + id + "\" onclick=\"onAreaSelection(this)\" />\n";
  }
  return areas;
}

function client_side_map( name, coordinates ) 
{ 
  return "<map name=\"" + name + "\">\n" + areas(coordinates) + "</map>\n";
}
  

testgetElement = document.all ?
	function (s_id) { return document.all[s_id] } :
	function (s_id) { return document.getElementById(s_id) };


function onExpirationChange(obj)
{
 setData("exp", obj.value);
}

</script>




  </head>
  <body>
    <form name="networksForm">

      <img src="http://charts.hotelzapper.net/john/friends/networks/piechart?size=2" usemap="#networks" >
      <div id="usemapContainerDiv" name="usemapContainerDiv"></div>
    
      <script type="text/javascript">
	    var container = testgetElement('usemapContainerDiv');
	    container.innerHTML = client_side_map("networks", map.map);   
      </script>

      <select name="networks" onchange="onSelectionChanged(this);">
        <option value="att" >AT&T</option>
        <option value="tmobile">Tmobile</option>
      </select>    


      <img src="img/cal.gif" id="tcalico_myid" onclick="A_TCALS['myid'].f_toggle()" class="tcalIcon" alt="Open Calendar" />
	  <div id="tcalShade"></div>
	  <div id="tcal"></div>	 
	  <iframe src="img/pixel.gif" id="tcalIF"></iframe>
	 
	 
	 
	  <input type="text" name="expiration" onchange="onExpirationChange(this)"/>
	  <script type="text/javascript">
        new tcal ({'id' : 'myid', 'formname': 'networksForm', 'controlname': 'expiration' });
	  </script>
    </form>
  </body>
</html>